{% extends 'base.html' %} {% block css%}
<style type="text/css"></style>
{% endblock %} {% block body%}
    <div class="row">

    <div class="col-md-7">
            <h3>Host side PRBS</h3>
            <table class="table table-hover table-responsive table-condensed">
                <tr>
                    <td>Config</td>
                    <td> 
                        <button id="btn_host_side_prbs_config_enble1" class="btn btn-success">Enable</button>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <button id="btn_host_side_prbs_config_disable1" class="btn btn-warning">Disable</button>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td></td>
                </tr>
            </table>

            <table class="table table-hover table-responsive">

                <tr>
                    <td></td>
                    <td>ERROR COUNT</td>
                    <td>BIT COUNT</td>
                    <td>BER</td>
                </tr>

                <tr>
                    <td id="l1_1">Host Lane 1</td>
                    <td id="l1_2"> --- </td>
                    <td id="l1_3"> --- </td>
                    <td id="l1_4"> --- </td>
                </tr>
                <tr>
                    <td id="l2_1">Host Lane 2</td>
                    <td id="l2_2"> --- </td>
                    <td id="l2_3"> --- </td>
                    <td id="l2_4"> --- </td>
                </tr>
             
                <tr>
                    <td id="l3_1">Host Lane 3</td>
                    <td id="l3_2"> --- </td>
                    <td id="l3_3"> --- </td>
                    <td id="l3_4"> --- </td>
                </tr>

                <tr>
                    <td id="l4_1">Host Lane 4</td>
                    <td id="l4_2"> --- </td>
                    <td id="l4_3"> --- </td>
                    <td id="l4_4"> --- </td>
                </tr>

                <tr>
                    <td id="l5_1">Host Lane 5</td>
                    <td id="l5_2"> --- </td>
                    <td id="l5_3"> --- </td>
                    <td id="l5_4"> --- </td>
                </tr>

                <tr>
                    <td id="l6_1">Host Lane 6</td>
                    <td id="l6_2"> --- </td>
                    <td id="l6_3"> --- </td>
                    <td id="l6_4"> --- </td>
                </tr>

                <tr>
                    <td id="l7_1">Host Lane 7</td>
                    <td id="l7_2"> --- </td>
                    <td id="l7_3"> --- </td>
                    <td id="l7_4"> --- </td>
                </tr>   

                <tr>
                    <td id="l8_1">Host Lane 8</td>
                    <td id="l8_2"> --- </td>
                    <td id="l8_3"> --- </td>
                    <td id="l8_4"> --- </td>
                </tr>
                <tr>
                    <td colspan="5">
                        <button id="btn_host_side_prbs" class="btn btn-success">
                        Get
                         <i id="btn_host_side_prbs_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                        </button>
                    </td>
                </tr>
            </table>
        </div>


        <div class="col-md-5">
            <h3>Line side PRBS</h3>
            <table class="table table-hover table-responsive table-condensed form-inline">
                <tr>
                    <td>Config</td>
                    <td> 

                        <button id="btn_line_side_prbs_config_enble1" class="btn btn-success">Enable</button>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <button id="btn_line_side_prbs_config_disable1" class="btn btn-warning">Disable</button>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td></td>
                </tr>
            </table>
  
            <table class="table table-hover table-responsive">

                <tr>
                    <td>ERROR COUNT</td>
                    <td>BIT COUNT</td>
                    <td>BER</td>
                </tr>

                <tr>
                    <!-- <td id="m1_1">-</td> -->
                    <td id="m1_2">-</td>
                    <td id="m1_3">-</td>
                    <td id="m1_4">-</td>
                </tr>


                <tr>
                    <td colspan="4">
                        <button id="btn_line_side_prbs" class="btn btn-success">
                            Get
                            <i id="btn_line_side_prbs_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                        </button>
                    </td>
                </tr>
            </table>


            <button id="data_clear" class="btn btn-lg btn-primary">
                Data Clear
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;

            <button id="auto_refresh" class="btn btn-lg btn-success">
                Auto Refresh (3s)
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button id="stop_auto_refresh" class="btn btn-lg btn-danger">
                Stop Refresh
            </button>
            <br><br>
            <span id="auto_refresh_info" style="color: blue;"></span>

        </div>

    
    </div>
{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">
var t;

function auto_refresh()
{
    // line_side_prbs ////////////////////////////////
    $("#auto_refresh_info").html("Updating data ...");
    $.post(
        "api/btn_line_side_prbs1", {
        },
        function(data, status) {
            var obj=JSON.parse(data)
            console.log(obj);
            for(i=0; i<obj.length ; i++)
            {
                $("#m" + (i+1) + "_1").html(obj[i][0]);
                $("#m" + (i+1) + "_2").html(obj[i][1]);
                $("#m" + (i+1) + "_3").html(obj[i][2]);
                $("#m" + (i+1) + "_4").html(obj[i][3]);
            }

            // line_side_prbs ////////////////////////////////
            $.post(
                "api/btn_host_side_prbs1", {
                },
                function(data, status) {
                    var obj=JSON.parse(data)
                    console.log(obj);
                    for(i=0; i<obj.length ; i++)
                    {
                        $("#l" + (i+1) + "_1").html(obj[i][0]);
                        $("#l" + (i+1) + "_2").html(obj[i][1]);
                        $("#l" + (i+1) + "_3").html(obj[i][2]);
                        $("#l" + (i+1) + "_4").html(obj[i][3]);
                    }

                    $("#auto_refresh_info").html("All data is up to date.");
                }
            );



        }
    );

     t = setTimeout(auto_refresh, 3000);
}


$(document).ready(function() {
    toastr.options = {
        "closeButton": true,
        "positionClass": "toast-top-center"
    }

    $("#btn_line_side_prbs_loading").hide();
    $("#btn_host_side_prbs_loading").hide();

    $("#btn_line_side_prbs_config_enble1").click(function() {

        $.post(
            "api/btn_line_side_prbs_config_enble1", {
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
            }
        );
    });

    $("#btn_line_side_prbs_config_disable1").click(function() {

        $.post(
            "api/btn_line_side_prbs_config_disable1", {
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
            }
        );
    });


    $("#btn_host_side_prbs_config_enble1").click(function() {

        $.post(
            "api/btn_host_side_prbs_config_enble1", {
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
            }
        );
    });

    $("#btn_host_side_prbs_config_disable1").click(function() {

        $.post(
            "api/btn_host_side_prbs_config_disable1", {
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
            }
        );
    });


    $("#btn_line_side_prbs").click(function() {
        $("#btn_line_side_prbs_loading").show();
        $.post(
            "api/btn_line_side_prbs1", {
            },
            function(data, status) {
                var obj=JSON.parse(data)
                console.log(obj);

                for(i=0; i<obj.length ; i++)
                {
                    $("#m" + (i+1) + "_1").html(obj[i][0]);
                    $("#m" + (i+1) + "_2").html(obj[i][1]);
                    $("#m" + (i+1) + "_3").html(obj[i][2]);
                    $("#m" + (i+1) + "_4").html(obj[i][3]);
                }

                $("#btn_line_side_prbs_loading").hide();
            }
        );
    });

    $("#btn_host_side_prbs").click(function() {
        $("#btn_host_side_prbs_loading").show();
        $.post(
            "api/btn_host_side_prbs1", {
            },
            function(data, status) {
                var obj=JSON.parse(data)
                console.log(obj);

                for(i=0; i<obj.length ; i++)
                {
                    $("#l" + (i+1) + "_1").html(obj[i][0]);
                    $("#l" + (i+1) + "_2").html(obj[i][1]);
                    $("#l" + (i+1) + "_3").html(obj[i][2]);
                    $("#l" + (i+1) + "_4").html(obj[i][3]);
                }

                $("#btn_host_side_prbs_loading").hide();
            }
        );
    });


    $("#data_clear").click(function() {
        $("#auto_refresh_info").html("Data clear ...");
        $.post(
            "api/data_clear", {
            },
            function(data, status) {
                // console.log(data);
                $("#auto_refresh_info").html("Data clear, ok.");
            }
        );
    });


    $("#auto_refresh").click(function() {
       auto_refresh();
    });

    $("#stop_auto_refresh").click(function() {
       clearTimeout(t);
        $("#auto_refresh_info").html("Auto refresh is disabled.");
    });


});
</script>
{% endblock %}